<template>
  <div>
    <h1>封装2</h1>
    <img
      width="300"
      src="https://sanjitian-1256310189.cos.ap-chengdu.myqcloud.com/gin_test/2024/11/2024_11_12_20_27_58_6442_123.jpeg"
      alt=""
    />

    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="http://goapi.sanjitian.cn/api/files"
      :headers="headers"
      :data="extraData"
      name="file"
      accept="image/*"
      multiple
      :on-success="handleAvatarSuccess"
      :show-file-list="false"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
    >
      <el-button type="primary">上传</el-button>
    </el-upload>

    <div class="my-img-list">
      <img v-for="item in myImgList" :key="item.id" :src="item.filePathCos" :alt="item.fileType" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
export interface IResponseImageInfo {
  code: string
  data: IFileInfo
  msg: string
}
export interface IFileInfo {
  fileExtension: string
  filePathCos: string
  fileSize: string
  fileType: string
  fileUse: string
  id: number
  mineType: string
  uploadTime: string
}

const myImgList = ref<IFileInfo[]>([])

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response: IResponseImageInfo,
  uploadFile
) => {
  console.log(uploadFile, '#uploadFile')
  console.log(response, '#response')
  myImgList.value?.push(response.data)
}
const headers = {
  Authorization:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6eyJ1c2VySWQiOjEwNjgsInVzZXJuYW1lIjoiQ3VpTWVuZ2ppYW8iLCJuaWNrbmFtZSI6IuW0lOaipuWohyIsImRlcHRJZCI6MSwicm9sZXMiOiJBRE1JTiJ9LCJpc3MiOiJkeXM2MjMwIiwiZXhwIjoxNzMxNDM4NTA2LCJuYmYiOjE3MzE0MDI1MDYsImlhdCI6MTczMTQwMjUwNn0.0dUF4oa_OiDYzVE2V1Cgic8sMlNampvOXAibFLvaTO8' // 如果需要 Token 认证
}

const extraData = {}

const fileList = ref<UploadUserFile[]>([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  }
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
    () => true,
    () => false
  )
}
</script>

<style lang="scss" scoped>
.my-img-list {
  width: 100%;
  height: 200px;
  display: flex;

  img {
    height: 100%;
  }
}
</style>
